<div class="container-fluid console" ng-controller="logtrail">
  <div class="alert alert-danger logtrail-error" ng-show="errorMessage != null">
    <a ng-click="errorMessage = null" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Error! </strong> {{ errorMessage }}
  </div>
  <div class='no-event-message' ng-show='events.length !== 0 && firstEventReached'>Oldest event reached.</div>
  <div class='no-event-message' ng-show='showNoEventsMessage'>No events found.<br>
    <div ng-show="isTimeRangeSearch()" class='time-range'>Time range searched: {{ noEventErrorStartTime }} to Now </div>
  </div>
  <ul class="events">
    <li id="{{ event.id }}" ng-repeat="event in events" on-last-repeat infinite-scroll>
      <time>{{ event.display_timestamp }}</time>
      <span class='host'><a href ng-click="onHostSelected(event.hostname)">{{ event.hostname }}</a></span>
      <span class='program'><a ng-click="onProgramClick(event.program)">{{ event.program }}:</a></span>
      <span class="message">{{ event.message }}</span>
    </li>
  </ul>

<div class="footer">
    <form class="form-inline search-form" ng-submit="onSearchClick()">
      <div class="flex-container-search">
        <input type="text" ng-model="userSearchText" class="search-box form-control flex-item-search"
            placeholder='Example: "access denied" 1.2.3.4 -sshd'></input>
        <button class="submit btn search-btn flex-item-search" >Search</button>
        <button type="button" id="showHostPickerBtn" class="btn host-option-select-btn flex-item-search"
          ng-click="showHostPicker()">{{selectedHost == null ? 'All Systems' : selectedHost}}</button>
        <button type="button" id="showDatePickerBtn" class="time-option-select-btn btn flex-item-search"
          ng-click="showDatePicker()">{{ isNullorEmpty(userDateTimeSeeked) ? 'Now' : userDateTimeSeeked }}</button>
      </div>
    </form>
    <div class="date-picker" id="date-picker" ng-show="datePickerVisible" click-outside="hideDatePicker()">
      <form class="form-inline" ng-submit="seekAndSearch()">
        <div class="flex-container-date-picker">
          <input class="flex-item-date-picker date-picker-box form-control" type="search"
          placeholder='7:02 am,last friday,jun 9 1:16pm'
          ng-model="userDateTime" ng-change="onDateChange()"></input>
          <button class="flex-item-date-picker date-picker-btn submit">Seek To</button>
          <label class="flex-item-date-picker date-picker-message"
            ng-class="{ 'date-picker-message-error' : !isNullorEmpty(userDateTime)  && (pickedDateTime == null) }">
            {{ (isNullorEmpty(userDateTime)) ? 'Right now' : (pickedDateTime == null ? 'Cannot parse date time' : pickedDateTime)}}</label>
          <!--div class="flex-item-date-picker date-picker-examples">Examples</div-->
        </div>
      </form>
    </div>

    <div class="host-picker" id="host-picker" ng-show="hostPickerVisible" click-outside="hideHostPicker()">
      <ul class="host-picker-list">
        <li ng-repeat="host in hosts"><a href ng-click="onHostSelected(host.key)">{{host.key}}</a></li>
        <li> <a href ng-click="onHostSelected('*')"> [ All Systems ] </a></li>
      </ul>
    </div>
    <div class="pull-right live-tail-button">
      <button class="tail-status-btn" ng-click="toggleLiveTail()" >{{getLiveTailStatus()}}</button>
    </div>
</div>
</div>
